<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
    <style>
        * {
            font-family: "微软雅黑 Light", "Candara Light";
        }

        #java {
            font-size: 24px;
            font-weight: bold;
        }

        h2 {
            font-size: 36px;
            color: pink;
            text-align: center;
        }

        body p:nth-of-type(1) {
            font-weight: bold;
            /*首行缩进*/
            text-indent: 2em;
        }

        p:nth-of-type(2) {
            font-weight: bolder;
        }

        #test {
            font: oblique bold 16px 楷体;
        }

        #english {
            background: pink;
            height: 60px;
            line-height: 30px;
        }

        div:nth-of-type(1) {
            text-decoration: overline;
        }

        div:nth-of-type(2) {
            text-decoration: line-through;
        }

        div:nth-of-type(3) {
            text-decoration: underline;
        }

        a > img, a > span {
            vertical-align: middle;
        }
    </style>
</head>
<body>

<h2>span</h2>
欢迎学习<span id="java">Java</span>

<h2>故事介绍</h2>
<p>
    平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p>
    在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>
<p id="english">
    He was my North, my South, my East and West, My working week and my Sunday rest, My noon, my midnight, my talk, my
    song; I thought that love would last forever: I was wrong.
</p>
<p id="test">
    所有样式写在一行的测试
</p>

<div>123</div>
<div>456</div>
<div>789</div>

<a href="#">
    <img src="imgs/avatar.jpg" alt="乐哥哥" title="乐哥哥" height="50px" width="50px">
    <span>我的头像</span>
</a>

</body>
</html>